<!DOCTYPE HTML>
{% load staticfiles %}
<html>
	<head>
		<meta charset="utf-8">
		<title>主页 - 夏日午后·忘记行走</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- Styles -->
		<link href="{% static "css/home/bootstrap.css" %}" rel="stylesheet">
		<link href="{% static "css/home/style.css" %}" rel="stylesheet">
		<link rel='stylesheet' id='prettyphoto-css'  href="{% static "css/home/prettyPhoto.css" %}" type='text/css' media='all'>
		<link href="{% static "css/home/fontello.css" %}" type="text/css" rel="stylesheet">
		<!--[if lt IE 7]>
		<link href="{% static "css/home/fontello-ie7.css" %}" type="text/css" rel="stylesheet">
		<![endif]-->
		<!-- Useso Web fonts -->

		<style>
			body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}
		</style>
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
		<![endif]-->
		<!-- Favicon -->
		<link rel="shortcut icon" href="{% static "images/favicon.ico" %}">
		<!-- JQuery -->
		<script type="text/javascript" src="{% static "scripts/home/jquery.js" %}"></script>
		<!-- Load ScrollTo -->
		<script type="text/javascript" src="{% static "scripts/home/jquery.scrollTo-1.4.2-min.js" %}"></script>
		<!-- Load LocalScroll -->
		<script type="text/javascript" src="{% static "scripts/home/jquery.localscroll-1.2.7-min.js" %}"></script>
		<!-- prettyPhoto Initialization -->
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$("a[rel^='prettyPhoto']").prettyPhoto();
			});
		</script>
	</head>
	<body>
		<!--******************** NAVBAR ********************-->
		<div class="navbar-wrapper">
			<div class="navbar navbar-inverse navbar-fixed-top">
				<div class="navbar-inner">
					<div class="container">
						<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
						<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
						<h1 class="brand"><a href="#top">Hainuer</a></h1>
						<nav class="pull-right nav-collapse collapse">
							<ul id="menu-main" class="nav">
								<li>
									<a title="portfolio" href="#portfolio">Apps 开发</a>
								</li>
								<li>
									<a title="news" href="#news">Kume 博客</a>
								</li>
							</ul>
						</nav>
					</div>
					<!-- /.container -->
				</div>
				<!-- /.navbar-inner -->
			</div>
			<!-- /.navbar -->
		</div>
		<!-- /.navbar-wrapper -->
		<div id="top"></div>
		<!-- ******************** HeaderWrap ********************-->
		<div id="headerwrap">
			<header class="clearfix">
				<h2><br/><span>夏日午后 · 忘记行走</span><br/><br/>Summer Afternoon, Forget Walking.</h2>
				<div class="container">
					<div class="row">
						<div class="span12">
							<ul class="icon">
								<li>
									<a href="http://www.facebook.com" target="_blank"><i class="icon-facebook-circled"></i></a>
								</li>
								<li>
									<a href="http://www.twitter.com/hainuer" target="_blank"><i class="icon-twitter-circled"></i></a>
								</li>
								<li>
									<a href="http://plus.google.com/GeekPhx" target="_blank"><i class="icon-gplus-circled"></i></a>
								</li>
								<li>
									<a href="http://www.weibo.com/ihainuer" target="_blank"><i class="icon-skype-circled"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</header>
		</div>
		<!--******************** Portfolio Section ********************-->
		<section id="portfolio" class="single-page scrollblock">
			<div class="container">
				<div class="align">
					<i class="icon-desktop-circled"></i>
				</div>
				<h1 id="folio-headline">Apps 开发</h1>
				<div class="row">
					<div class="span6">
						<div class="mask2">
							<a href="{% static "css/img/portfolio-01.jpg" %}" rel="prettyPhoto"><img src="{% static "css/img/portfolio-01.jpg" %}" alt=""></a>
						</div>
						<div class="inside">
							<hgroup>
								<h2>Kume 博客</h2>
							</hgroup>
							<div class="entry-content">
								<p>
									使用Python, Django 1.8.0开发的简易博客. 目前主要实现了博客的添加、修改、删除等操作, 以及阅读。对界面进行了美化。后期计划新增的功能主要有: 评论模块及SEO优化等。
								</p>
								<a class="more-link" href="/kume/">查看Kume</a>
							</div>
						</div>
						<!-- /.inside -->
					</div>
					<!-- /.span6 -->
					<div class="span6">
						<div class="mask2">
							<a href="{% static "css/img/portfolio-02.jpg" %}" rel="prettyPhoto"><img src="{% static "css/img/portfolio-02.jpg" %}" alt=""></a>
						</div>
						<div class="inside">
							<hgroup>
								<h2>ZhaoKao 贵州招考资讯网</h2>
							</hgroup>
							<div class="entry-content">
								<p>
									厌倦了招考资讯网站过多的广告, 所以做了这个App. 主要通过requests采集并使用BeautifulSoup4及正则表达式等进行分析提取相关内容, 然后采用BootStrap实现了前端Ui部分。
								</p>
								<a class="more-link" href="/zhaokao/">查看ZhaoKao</a>
							</div>
						</div>
						<!-- /.inside -->
					</div>
					<!-- /.span6 -->
				</div>
				<!-- /.row -->
			</div>
			<!-- /.container -->
		</section>
		<hr>
		<section id="news" class="single-page scrollblock">
			<div class="container">
				<div class="align">
					<i class="icon-pencil-circled"></i>
				</div>
				<h1>Kume 博客</h1>
				<!-- Three columns -->
				<div class="row">
					{% for article in articles %}
					<article class="span12 post">
						<div class="inside">
							<p class="post-date">
								热度: {{ article.views }} C' · <i class="icon-calendar"></i> {{ article.pub_date }}
							</p>
							<h2>{{ article.title }}</h2>
							<div class="entry-content">
								<p>{{ article.breviary | safe }} &hellip;</p>
								<a target="_blank" href="kume/post/{{ article.uuid }}" class="more-link">阅读更多</a>
							</div>
						</div>
						<!-- /.inside -->
					</article>
					<!-- /.span12 -->
					{% endfor %}
				</div>
				<!-- /.row -->
				<a href="kume/" class="btn btn-large">到Kume看看吧</a>
			</div>
			<!-- /.container -->
		</section>
		<hr>
		<div class="footer-wrapper">
			<div class="container">
				<footer>
					<small>&copy; 2015 Hainuer. All rights reserved.</small>
				</footer>
				<br />
			</div>
			<!-- ./container -->
		</div>
		<!-- Loading the javaScript at the end of the page -->
		<script type="text/javascript" src="{% static "scripts/home/bootstrap.js" %}"></script>
		<script type="text/javascript" src="{% static "scripts/home/jquery.prettyPhoto.js" %}"></script>
		<script type="text/javascript" src="{% static "scripts/home/site.js" %}"></script>
	</body>
</html>
